<template>
	<view class="container">
		<view class="menu_container" :style="'margin-top:' + fTop + 'px;' +
		 'margin-left:' + (horizon ? 160 : 40) + 'rpx;'">
			<image class="ladder-img" src="../../static/ladder.png" :style="imgPos"></image>
			<view class="white-line"></view>
			<view class="menubox">
				<view class="menubox-item" v-for="(item,index) in select" :key="index"
				v-if="index > 1 || (index == 0 && !isVoice) || (index == 1 && isVoice)">
					<image class="menubox-item-image" :src="'../../static/select-'+ index + '.png'" ></image>
					<view class="menubox-item-text">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"BlackMenu",
		data() {
			return {
				select : ['复制','转文字','转发','收藏','回复','撤回','删除'],//选项
			};
		},
		props : {
			horizon : {//气泡尖角方向 true为右
				type:Boolean ,
				default : false
			},
			vertical :{//气泡整体方向 true为下
				type:Boolean ,
				default : false
			},
			isVoice :{//是否为语音
				type:Boolean ,
				default : false
			},
			floatTop :{//悬浮顶端
				type:Number ,
				default : 0
			},
			floatHeight :{//悬浮高度
				type:Number ,
				default : 0
			},
		},
		computed : {
			fTop() {
				var l = this.floatTop;
				if(!this.vertical)
					l -= 130;
				else
					l += this.floatHeight + 10;
				return l;
			},
			imgPos() {
				var s = "";
				if(this.vertical){
					s += "margin-top : -8px; transform: rotateX(180deg);"
					if(this.horizon){
						s += "margin-left : 370rpx";
					}else{
						s += "margin-left : 150rpx";
					}
				}else{
					s += "margin-top : 120px;"
					if(this.horizon){
						s += "margin-left : 370rpx";
					}else{
						s += "margin-left : 150rpx";
					}
				}
				return s;
			}
		}
	}
</script>

<style lang="scss">
.container {
	position:absolute;
	//box-shadow: 2px -3px 100px -5px  #FFFFFF;
	height: 100%;
	width: 100%;
	
	.menu_container {
		position:absolute;
		
		.ladder-img {
			position:absolute;
			width: 30rpx;
			height: 20rpx;
		}
		
		.white-line {
			position:absolute;
			margin-top : 60px;
			margin-left : 15rpx;
			height: 1px;
			width: 470rpx;
			background-color: #cccccc;
		}
		
		.menubox {
			width: 500rpx;
			height: 120px;
			background-color: #696666;
			border-radius: 10px;
			display: flex;
			flex-wrap: wrap;
			
			.menubox-item {
				width: 100rpx;
				height: 55px;
				margin-top: 8px;
				text-align: center;
					
				.menubox-item-image {
					width: 20px;
					height: 20px;
				}
				
				.menubox-item-text {
					font-size: 10px;
					color: white;
				}
			}
			
			
		}
	}
	
	
}
</style>